<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P06_内容排版.html</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <style>
        .row {
            border: 1px red dashed;
            margin: 10px 0;
            height: 100px;
        }

        .ca {
            border: 1px pink solid;
            background-color: lightgray;
            height: 30px;
        }
    </style>
</head>
<body>
<center>h1、h2、h3、h4、h5、h6</center>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr>
<div class="h1">div.h1</div>
<div class="h2">div.h2</div>
<div class="h3">div.h3</div>
<div class="h4">div.h4</div>
<div class="h5">div.h5</div>
<div class="h6">div.h6</div>
<hr>
<h1>h1<small class="text-muted">text-muted</small></h1>
<hr>
<h1 class="display-1">display-1</h1>
<h1 class="display-2">display-2</h1>
<h1 class="display-3">display-3</h1>
<h1 class="display-4">display-4</h1>
<hr>
<hr>
<center>文本类</center>
<p>ppp</p>
<p class="lead">p.lead</p>
<p>没法哦i时间
    <mark>mark</mark>
    覅殴打事件罚款的父母
</p>
<p>没法哦i时间<span class="mark">mark</span>覅殴打事件罚款的父母</p>
<p>没法哦i时间
    <del>del</del>
    覅殴打事件罚款的父母
</p>
<p>没法哦i时间<s>sss</s>覅殴打事件罚款的父母</p>
<p>没法哦i时间<strong>strong</strong>覅殴打事件罚款的父母</p>
<p>没法哦i时间<em>em</em>覅殴打事件罚款的父母</p>
<p>没法哦i时间
    <addr title="这是一个提示">提示</addr>
    覅殴打事件罚款的父母
</p>
<div class="blockquote text-right">
    <p>在工作中学习，在学习中工作。</p>
    <footer class="blockquote-footer">footer</footer>
</div>
<div class="blockquote-footer">
    <p>在工作中学习，在学习中工作。</p>
</div>
<hr>
<hr>
<div class="text-center">列表类</div>
<ul class="list-unstyled">
    <li>Java</li>
    <li>PHP</li>
    <li>Python</li>
    <li>JavaScript</li>
    <ul class="list-unstyled">
        <li>Linux</li>
        <li>Apache</li>
        <li>MySQL</li>
    </ul>
</ul>
<ul class="list-inline">
    <li class="list-inline-item">Java</li>
    <li class="list-inline-item">PHP</li>
    <li class="list-inline-item">Python</li>
    <li class="list-inline-item">JavaScript</li>
</ul>
<div class="container">
    <dl class="row">
        <dt class="ca col-sm-3">第一行</dt>
        <dd class="ca col-sm-9 text-truncate">第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容第一行内容</dd>
        <dt class="ca col-sm-3">第二行</dt>
        <dd class="ca col-sm-9">第二行内容</dd>
    </dl>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</html>